<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="utf-8" />
		<title>矩阵计算器</title>
		<script src="../js/math.js" charset="utf-8"></script>
		<!--layui的css-->
		<link rel="stylesheet" href="../js/layui/layui/css/layui.css" media="all" type="text/css">

		<script src="../js/jquery.min.js" charset="utf-8"></script>
		<script src="../js/layui/layui/layui.js" charset="utf-8"></script>

		<!--自建的css文件-->
		<link href="../css/myMainCss.css" rel="stylesheet" type="text/css" />

		<!--<script src="js/jexcel.js"></script>
		<script src="js/jsuites.js"></script>
		<link rel="stylesheet" href="css/jsuites.css" type="text/css"/>
		<link rel="stylesheet" href="css/jexcel.css" type="text/css" />-->

		<script src="../js/handsontable.full.min.js"></script>
		<link rel="stylesheet" href="../css/handsontable.full.min.css" type="text/css" />

	</head>

	<body>
		<!--banner-->
		<div>
			<span style="">矩阵简单计算器</span>
		</div>

		<!--内容-->
		<div>

			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title" style="margin-left: 3px;">
					<li class="layui-this">点积(dot product)</li>
					<li>商</li>
					<li>逆</li>
					<li>幂</li>
					<li>叉积(cross product)</li>
					<li>行列式(det)</li>
				</ul>

				<div class="layui-tab-content" style="height: 70%; width: 90%; position: absolute; left: 5%;  ">

					<!--选项卡1内容-->
					<div class="layui-tab-item layui-show " style="position: absolute; width: 75%; height: 80%; top: 10%;   ">

						<!--填写矩阵形状-->
						<div>
							<p>
								<span>矩阵A:</span>
								<input type="text" name="mat_a" id="input_rowNum_3_a" value="" />行 &nbsp;
								<input type="text" name="mat_a" id="input_colNum_3_a" value="" />列
							</p>

							<p>
								<input type="button" id="but_shape_3" value="确 认 生 成 矩 阵" />
							</p>

						</div>

						<!--矩阵A-->
						<div>
							<p>
								矩阵A:
							</p>
							<div id="myTable_3_a"></div>
						</div>

						<!--计算结果-->
						<div>
							<p>
								<input type="button" id="but_result_3" value="点 击 计 算 结 果" />
							</p>
							<p>
								计算结果:
							</p>

							<div id="myTable_3_r"></div>
						</div>


					</div>
					<!--选项卡1内容结束==============================-->
					<!--选项卡2内容-->
					<div class="layui-tab-item  " style="position: absolute; width: 75%; height: 80%; top: 10%;">

						<!--填写矩阵形状-->
						<div>
							<p>
								<span>矩阵A:</span>
								<input type="text" name="mat_a" id="input_rowNum_mat_2_a" value="" />行 &nbsp;
								<input type="text" name="mat_a" id="input_colNum_mat_2_a" value="" />列
							</p>

							<p>
								<span>矩阵B:</span>
								<input type="text" name="mat_a" id="input_rowNum_mat_2_b" value="" />行 &nbsp;
								<input type="text" name="mat_a" id="input_colNum_mat_2_b" value="" />列
							</p>

							<p>
								<input type="button" id="but_shape_2" value="确 认 生 成 矩 阵" />
							</p>

						</div>

						<!--矩阵A-->
						<div>
							<p>
								矩阵A:
							</p>
							<div id="myTable_2_a"></div>
						</div>

						<!--矩阵B-->
						<div>
							<p>
								矩阵B:
							</p>
							<div id="myTable_2_b"></div>
						</div>

						<!--计算结果-->
						<div>
							<p>
								<input type="button" id="but_result_2" value="点 击 计 算 结 果" />
							</p>
							<p>
								计算结果:
							</p>

							<div id="myTable_2_r"></div>
						</div>

					</div>
					<!--选项卡2内容结束============================-->
					<!--选项卡3内容-->
					<div class="layui-tab-item " style="position: absolute; width: 75%; height: 80%; top: 10%;">

						<!--&lt;!&ndash;填写矩阵形状&ndash;&gt;-->
						<!--<div>-->
							<!--<p>-->
								<!--<span>矩阵A:</span>-->
								<!--<input type="text" name="mat_a" id="input_rowNum_3_a" value="" />行 &nbsp;-->
								<!--<input type="text" name="mat_a" id="input_colNum_3_a" value="" />列-->
							<!--</p>-->

							<!--<p>-->
								<!--<input type="button" id="but_shape_3" value="确 认 生 成 矩 阵" />-->
							<!--</p>-->

						<!--</div>-->

						<!--&lt;!&ndash;矩阵A&ndash;&gt;-->
						<!--<div>-->
							<!--<p>-->
								<!--矩阵A:-->
							<!--</p>-->
							<!--<div id="myTable_3_a"></div>-->
						<!--</div>-->

						<!--&lt;!&ndash;计算结果&ndash;&gt;-->
						<!--<div>-->
							<!--<p>-->
								<!--<input type="button" id="but_result_3" value="点 击 计 算 结 果" />-->
							<!--</p>-->
							<!--<p>-->
								<!--计算结果:-->
							<!--</p>-->

							<!--<div id="myTable_3_r"></div>-->
						<!--</div>-->

					</div>
					<!--选项卡3内容结束============================================-->

					<!--选项卡4内容-->
					<div class="layui-tab-item " style="position: absolute; width: 75%; height: 80%; top: 10%;">

						选项卡4

					</div>

					<!--选项卡5内容-->
					<div class="layui-tab-item " style="position: absolute; width: 75%; height: 80%; top: 10%;">

						选项卡5

					</div>

				</div>
			</div>
		</div>

		<!--表格的js-->
		<script type="application/javascript">

            const data = [
                ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
                ['2019', 10, 11, 12, 13],
                ['2020', 20, 11, 14, 13],
                ['2021', 30, 15, 12, 13]
            ];




			//选项卡2--计算商------------------------------------------------
			//点击按钮生成表格
//			var but_shape_2 = document.getElementById("but_shape_2");
//			but_shape_2.onclick = showTableFromShape_2;
//
//			//定义矩阵行列数
//			var input_rowNum_mat_2_a = document.getElementById("input_rowNum_mat_2_a");
//			var input_colNum_mat_2_a = document.getElementById("input_colNum_mat_2_a");
//			var input_rowNum_mat_2_b = document.getElementById("input_rowNum_mat_2_b");
//			var input_colNum_mat_2_b = document.getElementById("input_colNum_mat_2_b");
//
//			const myTable_2_a = document.getElementById('myTable_2_a');
//			const ht_2_a = new Handsontable(myTable_1_a, {
//				data: data,
//				rowHeaders: true,
//				colHeaders: function(index) {
//					return index + 1;
//				},
//				licenseKey: 'non-commercial-and-evaluation'
//			});
//
//			const myTable_2_b = document.getElementById('myTable_2_b');
//			const ht_2_b = new Handsontable(myTable_2_b, {
//				data: data,
//				rowHeaders: true,
//				colHeaders: function(index) {
//					return index + 1;
//				},
//				licenseKey: 'non-commercial-and-evaluation'
//			});
//
//			const myTable_2_r = document.getElementById('myTable_2_r');
//			const ht_2_r = new Handsontable(myTable_2_r, {
//				data: data,
//				rowHeaders: true,
//				colHeaders: function(index) {
//					return index + 1;
//				},
//				licenseKey: 'non-commercial-and-evaluation'
//			});
//
//			function showTableFromShape_2() {
//
//				var a_num_row = input_rowNum_mat_2_a.value;
//				var a_num_col = input_colNum_mat_2_a.value;
//				var b_num_row = input_rowNum_mat_2_b.value;
//				var b_num_col = input_colNum_mat_2_b.value;
//
//				var data_1_a = new Array();
//				for(var k = 0; k < a_num_row; k++) {
//					data_1_a[k] = new Array();
//					for(var j = 0; j < a_num_col; j++) {
//						data_1_a[k][j] = 0;
//					}
//				}
//
//				var data_1_b = new Array();
//				for(var k = 0; k < b_num_row; k++) {
//					data_1_b[k] = new Array();
//					for(var j = 0; j < b_num_col; j++) {
//						data_1_b[k][j] = 0;
//					}
//				}
//
//				ht_2_a.updateSettings({
//					data: data_1_a
//				});
//
//				ht_2_b.updateSettings({
//					data: data_1_b
//				});
//
//			}
//
//			//点击按钮计算显示结果
//			var bnt_result_2 = document.getElementById("but_result_2");
//			bnt_result_2.onclick = getResult_2;
//
//			function getResult_2() {
//				//从表格中取数据
//				var a_data = ht_2_a.getData();
//				var b_data = ht_2_b.getData();
//				var myResult = math.multiply(a_data, b_data)
//				
//				ht_1_r.updateSettings({
//					data: myResult
//				});
//			}
//			选项卡2--计算商===============================================
			//选项卡3--计算逆--------------------------------------------
			
			//点击按钮生成表格
			var but_shape_3 = document.getElementById("but_shape_3");
			but_shape_3.onclick = showTableFromShape_3;

			//定义矩阵行列数
			var input_rowNum_3_a = document.getElementById("input_rowNum_3_a");
			var input_colNum_3_a = document.getElementById("input_colNum_3_a");

			const myTable_3_a = document.getElementById('myTable_3_a');
			const ht_3_a = new Handsontable(myTable_3_a, {
				data: data,
				rowHeaders: true,
				colHeaders: function(index) {
					return index + 1;
				},
				licenseKey: 'non-commercial-and-evaluation'
			});

			const myTable_3_r = document.getElementById('myTable_3_r');
			const ht_3_r = new Handsontable(myTable_3_r, {
				data: data,
				rowHeaders: true,
				colHeaders: function(index) {
					return index + 1;
				},
				licenseKey: 'non-commercial-and-evaluation'
			});

			function showTableFromShape_3() {

				var rowNum_3_a = input_rowNum_3_a.value;
				var colNum_3_a = input_colNum_3_a.value;
			
				var data_3_a = new Array();
				for(var k = 0; k < rowNum_3_a; k++) {
					data_3_a[k] = new Array();
					for(var j = 0; j < colNum_3_a; j++) {
						data_3_a[k][j] = 0;
					}
				}

				ht_3_a.updateSettings({
					data: data_3_a
				});

			}

			//点击按钮计算显示结果
			var but_result_3 = document.getElementById("but_result_3");
			but_result_3.onclick = getResult_3;

			function getResult_3() {
				//从表格中取数据
				var data_3_a = ht_3_a.getData();
				var data_3_r = math.inv(data_3_a);
				
				console.log(data_3_r);
				
				ht_3_r.updateSettings({
					data: data_3_r
				});
			}
			
			
			
			
			
			
			
			
			
		</script>

	</body>

	<!--tab选项卡代码-->
	<!--layui的非模块化的js-->
	<script type="text/javascript">
		layui.use('element', function() {
			var $ = layui.jquery,
				element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

			//触发事件
			var active = {
				tabAdd: function() {
					//新增一个Tab项
					element.tabAdd('demo', {
						title: '新选项' + (Math.random() * 1000 | 0) //用于演示
							,
						content: '内容' + (Math.random() * 1000 | 0),
						id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
					})
				},
				tabDelete: function(othis) {
					//删除指定Tab项
					element.tabDelete('demo', '44'); //删除：“商品管理”

					othis.addClass('layui-btn-disabled');
				},
				tabChange: function() {
					//切换到指定Tab项
					element.tabChange('demo', '22'); //切换到：用户管理
				}
			};

			$('.site-demo-active').on('click', function() {
				var othis = $(this),
					type = othis.data('type');
				active[type] ? active[type].call(this, othis) : '';
			});

			//Hash地址的定位
			var layid = location.hash.replace(/^#test=/, '');
			element.tabChange('test', layid);

			element.on('tab(test)', function(elem) {
				location.hash = 'test=' + $(this).attr('lay-id');
			});

		});
	</script>

	<!--计算代码-->
	<script type="application/javascript">
		// create an array and a matrix
		//		const array = [
		//			[2, 0],
		//			[-1, 3]
		//		] // Array
		//		const matrix = math.matrix([
		//			[7, 1],
		//			[-2, 3]
		//		]) // Matrix
		//
		//		// perform a calculation on an array and matrix
		//		const v_1 = math.square(array) // Array,  [[4, 0], [1, 9]]
		//
		//		console.log(v_1);
		//
		//		math.square(matrix) // Matrix, [[49, 1], [4, 9]]
		//
		//		// perform calculations with mixed array and matrix input
		//		math.add(array, matrix) // Matrix, [[9, 1], [-3, 6]]
		//		math.multiply(array, matrix) // Matrix, [[14, 2], [-13, 8]]
		//
		//		// create a matrix. Type of output of function ones is determined by the
		//		// configuration option `matrix`
		//		math.ones(2, 3) // Matrix, [[1, 1, 1], [1, 1, 1]]
	</script>

</html>